<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>支付宝信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">支付宝信息</div>
      <div class="table">
        <div class="title">用户信息</div>
        <div>
          <el-row>
            <el-col :span="6">邮箱</el-col>
            <el-col :span="6">{{account_info.email||'无数据'}}</el-col>
            <el-col :span="6">手机</el-col>
            <el-col :span="6">{{account_info.mobile||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">是否开启手机登录</el-col>
            <el-col :span="6">{{account_info.mobile_login||'无数据'}}</el-col>
            <el-col :span="6">支付宝真实姓名</el-col>
            <el-col :span="6">{{account_info.real_name||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">支付宝实名认证身份证</el-col>
            <el-col :span="6">{{account_info.identity_code||'无数据'}}</el-col>
            <el-col :span="6">实名认证的身份证类型</el-col>
            <el-col :span="6">{{account_info.identity_type||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">是否已经实名认证</el-col>
            <el-col :span="6">{{account_info.verified||'无数据'}}</el-col>
            <el-col :span="6">注册时间</el-col>
            <el-col :span="6">{{account_info.reg_time||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">支付宝绑定的主要淘宝账号</el-col>
            <el-col :span="6">{{account_info.taobao_name||'无数据'}}</el-col>
            <el-col :span="6">用户当前支付宝账号绑定的银行卡数量</el-col>
            <el-col :span="6">{{account_info.binded_bankcard_amount||'无数据'}}</el-col>
          </el-row>
        </div>
        <div class="title">用户绑定的账号</div>
        <el-table :data="account_info.binded_accounts" max-height="700">
          <el-table-column prop="binded_alipay_account" label="用户绑定的支付宝账号" align="center"></el-table-column>
          <el-table-column prop="binded_mobile" label="用户绑定的手机号" align="center"></el-table-column>
          <el-table-column prop="binded_taobao_account" label="用户绑定的淘宝ID" align="center"></el-table-column>
        </el-table>
        <div class="title">用户当前支付宝账号绑定的银行卡信息</div>
        <el-table :data="account_info.binded_bank_cards" max-height="700">
          <el-table-column prop="bank_name" label="发卡银行名称" align="center"></el-table-column>
          <el-table-column prop="tail_number" label="银行卡尾号" align="center"></el-table-column>
          <el-table-column prop="credit_type" label="卡类型" align="center"></el-table-column>
          <el-table-column prop="binded_pay_type" label="银行卡绑定到支付宝的支付方式" align="center"></el-table-column>
        </el-table>
        <div class="title">财富信息</div>
        <div>
          <el-row>
            <el-col :span="4">账户余额</el-col>
            <el-col :span="4">{{assets_info.assets_yu_e||'无数据'}}</el-col>
            <el-col :span="4">余额宝</el-col>
            <el-col :span="4">{{assets_info.assets_yu_e_bao||'无数据'}}</el-col>
            <el-col :span="4">基金</el-col>
            <el-col :span="4">{{assets_info.assets_fund||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">招财宝</el-col>
            <el-col :span="6">{{assets_info.assets_zhao_cai_bao||'无数据'}}</el-col>
            <el-col :span="6">存金宝</el-col>
            <el-col :span="6">{{assets_info.assets_cun_jin_bao||'无数据'}}</el-col>
            <el-col :span="6">淘宝理财</el-col>
            <el-col :span="6">{{assets_info.assets_taobao_finance||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">花呗额度</el-col>
            <el-col :span="6">{{assets_info.huabei_quota||'无数据'}}</el-col>
            <el-col :span="6">花呗余额</el-col>
            <el-col :span="6">{{assets_info.huabei_balance||'无数据'}}</el-col>
            <el-col :span="6">花呗消费额</el-col>
            <el-col :span="6">{{assets_info.consume_quota||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">花呗下一期需还款额</el-col>
            <el-col :span="6">{{assets_info.huabei_next_repayment_amount||'无数据'}}</el-col>
            <el-col :span="6">芝麻信用分</el-col>
            <el-col :span="6">{{assets_info.zhima_creadit_point||'无数据'}}</el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
          </el-row>
        </div>
        <div class="title">交易流水</div>
        <el-table :data="trans_info" max-height="700">
          <el-table-column prop="trade_type" label="交易类型" align="center"></el-table-column>
          <el-table-column prop="trade_time" label="交易时间" align="center"></el-table-column>
          <el-table-column prop="trade_name" label="交易名称" align="center"></el-table-column>
          <el-table-column prop="trade_order" label="交易订单" align="center"></el-table-column>
          <el-table-column prop="trade_id" label="交易流水号" align="center"></el-table-column>
          <el-table-column prop="trade_partner" label="交易对象" align="center"></el-table-column>
          <el-table-column prop="trade_amount" label="交易金额" align="center"></el-table-column>
          <el-table-column prop="trade_capital_flow" label="交易资金流向（收入／支出）" align="center"></el-table-column>
          <el-table-column prop="trade_status" label="交易状态" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        account_info: {},
        assets_info: {},
        trans_info: []
      }
    },
    created () {
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    text-align: center;

    .title {
      font-weight: bold;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      background-color: #2e78f2;
      color: #fff;
    }

    .el-row {
      display: flex;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:nth-child(2n+1) {
          color: #000;
          font-weight: 700;
        }

        &:last-child {
          border-right: none;
        }
      }
    }
  }
</style>
